<template>
	<view class="content">
		<!-- 订单状态为开始服务后 -->
		<block v-if="service.status==3">
			<!-- 23项护理报告有内容 -->
			<block v-if="isNullStatus==1">
				<view class="project my">
					<view class="title">
						<view>基础情况评估</view>
					</view>
					<view class="sign" v-for="(i,index) in arr1" :key="index">
						<view class="ltitle">{{i.fieldName}}</view>
						<!-- 血压 -->
						<view v-if="i.fieldType == 3" class="pressure">
							<input type="number" name='low' placeholder="低压(mmHg)" v-model="lowPre"
								placeholder-class="placeholder-class" />
							<input type="number" name="height" placeholder="高压(mmHg)" v-model="heightPre"
								placeholder-class="placeholder-class" />
						</view>
						<view v-else-if="i.fieldType  ==2" class="time" @click="transfer(i)">
							<biaofun-datetime-picker :placeholder="i.hintLanguage" start="2000" end="2100" fields="day"
								v-model="data[i.englishFieldName]" :value="data[i.englishFieldName]"
								@change="timeSelect"></biaofun-datetime-picker>
						</view>
						<input type="number" v-else value="" v-model="data[i.englishFieldName ]"
							:placeholder="i.hintLanguage" />
					</view>
				</view>
				<view class="project">
					<view class="title">
						<view>专项情况评估</view>
					</view>
					<view class="sign mysign" v-for="(i,index) in arr2" :key="index">
						<view class="ltitle">{{i.fieldName}}<text class="star">*</text></view>
						<view class="sin_wrap">
							<uni-data-checkbox v-model="data[i.englishFieldName]" @change="handleCheck($event, index)"
								:localdata="i.options"></uni-data-checkbox>
						</view>
						<view class="msg" v-if="i.isShow">
							<!-- 过敏史详情字段 -->
							<!-- <view class="" v-if="i.englishFieldName=='allergyHistory'">
								<textarea value="" v-model="data[i.englishFieldName+'Details']" placeholder="请说明情况"
									maxlength="100" placeholder-class="placeholder" />
								<view class="count">
									{{data[i.englishFieldName+'Details']&&data[i.englishFieldName+'Details'].length}}/100
								</view>
							</view> -->
							<view class="">
								<!-- 其他情况的输入框 -->
								<textarea value="" v-model="data[i.englishFieldName+'Detail']"
									:placeholder="i.hintLanguage" maxlength="100" placeholder-class="placeholder" />
								<view class="count">
									{{data[i.englishFieldName+'Detail']&&data[i.englishFieldName+'Detail'].length}}/100
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<!-- 无内容 -->
			<block v-if="isNullStatus==0">
				<view class="project">
					<view class="title">
						<view>基础情况评估</view>
					</view>
					<view class="sign">
						<view class="">体温(摄氏度)</view>
						<input type="digit" value="" v-model="data.animalHeat" maxlength="4" placeholder="请填写体温" />
					</view>
					<view class="sign">
						<view class="">脉搏(次/分)</view>
						<input type="number" value="" v-model="data.sphygmus" placeholder="请填写心跳" />
					</view>
					<view class="sign">
						<view class="">呼吸(次/分)</view>
						<input type="number" value="" v-model="data.breathe" placeholder="请填写呼吸" />
					</view>
					<view class="sign">
						<view class="">血压（mmHg）</view>
						<view class="pressure">
							<input type="number" name='low' placeholder="低压(mmHg)" v-model="lowPre"
								placeholder-class="placeholder-class" />
							<input type="number" name="height" placeholder="高压(mmHg)" v-model="heightPre"
								placeholder-class="placeholder-class" />
						</view>
					</view>
				</view>
			</block>
		</block>
		<!-- 订单状态为服务结束 -->
		<!-- 护士 -->
		<block
			v-if="service.status == 4 && (!service.nursingRecordStatus || service.nursingRecordStatus == 3)&&service.showStatus == 1 && this.identity === 1">
			<view class="project">
				<view class="title">
					<view>护理图片1111（5-10张）<text class="star">*</text></view>
				</view>
				<view class="photoBox">
					<view class="photo" v-for="(item,index) in photo" :class="{'none': (index+1)%4==0}"
						style="background-color: rgba(243, 246, 246, 1);" :key="index" @click.prevent="clickImg(index)">
						<image :src="item" mode="aspectFit"></image>
						<text class="iconfont icon-a-qingkongpng cha" @click.stop="del(index)"></text>
					</view>
					<view class="addPhoto" @click="add" v-show="photo.length<10">
						<view class="iconfont icon-paishe xiangji">
						</view>
					</view>
				</view>
				<view class="photoTitle1">
					<view class="photoTitle">
						上传须知：
					</view>
					<view class="my_wrap">
						<text class="p">1、上门护士本人手持身份证照片，并且身份证清晰</text>
						<text class="p">2、操作照，前中后各一张。</text>
						<text class="p">3、服务承诺函，需患者进行签字。</text>
					</view>
				</view>
			</view>
			<view class="project mypadding">
				<view class="title">
					<view>患者主述<text class="star">*</text></view>
				</view>
				<textarea value="" v-model="data.principleAction" placeholder="请输入患者的症状描述"
					placeholder-style="color: rgba(0, 0, 0, 0.1);font-size: 28rpx;" class="record" />
			</view>
			<view class="project mypadding">
				<view class="title">
					<view>护理内容<text class="star">*</text></text></view>
				</view>
				<textarea value="" v-model="data.nursingContent" placeholder="请填写您的护理内容"
					placeholder-style="color: rgba(0, 0, 0, 0.1);font-size: 28rpx;" class="record" />
			</view>
			<view class="project mypadding">
				<view class="title">
					<view>健康指导<text class="star">*</text></text></view>
				</view>
				<textarea value="" v-model="data.healthGuidance" placeholder="请填写服务完成后的健康指导内容"
					placeholder-style="color: rgba(0, 0, 0, 0.1);font-size: 28rpx;" class="record" />
			</view>

		</block>
		<!-- 护工 -->
		<block
			v-if="service.status == 4 && (!service.nursingRecordStatus || service.nursingRecordStatus == 3)&&service.showStatus == 1 && this.identity === 2">
			<view class="project">
				<view class="title">
					<view>护理图片（至少1张）<text class="star">*</text></view>
				</view>
				<view class="photoBox">
					<view class="photo" v-for="(item,index) in photo" :class="{'none': (index+1)%4==0}"
						style="background-color: rgba(243, 246, 246, 1);" :key="index" @click.prevent="clickImg(index)">
						<image :src="item" mode="aspectFit"></image>
						<text class="iconfont icon-a-qingkongpng cha" @click.stop="del(index)"></text>
					</view>
					<view class="addPhoto" @click="add" v-show="photo.length<10">
						<view class="iconfont icon-paishe xiangji">
						</view>
					</view>
				</view>
			</view>
		</block>
		<view class="end_wrap">
			<view class="notice">
				<checkbox-group name="" @change="check">
					<label class="label">
						<checkbox value="cb" :checked="checked" color="#3C8EFF" style="transform:scale(0.7)" />
					</label>
				</checkbox-group>
				请如实填写以上内容，如有弄虚作假，后果由填写的护士本人负责，并直接影响本次操作的佣金结算。
			</view>
		</view>
		<view class="end">
			<view class="save" @click="save()">
				提交
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/uni-ui/lb-picker';
	import uploadImage from '@/common/js/ossutil/uploadFile.js'
	import {
		translateapp
	} from '../../../common/js/common.js'
	import {
		created
	} from '@/apis/report/index.js'
	import {
		selectOrderInfo
	} from '@/apis/order/index.js'
	import {
		requestAndroid
	} from '@/common/js/location.js'
	import biaofunDatetimePicker from "@/components/biaofun-datetime-picker/biaofun-datetime-picker.vue"
	export default {
		data() {
			return {
				date: '',
				i: '',
				arr1: [],
				arr2: [],
				number: '', //订单号
				//高压低压
				heightPre: '',
				lowPre: '',
				//血压选项默认值
				pressureDefault: [70, 110],
				photo: [], //照片
				checked: false, //是否本人操作
				service: '', //用户信息
				// data: {}, //上传内容
				animalHeat: '',
				//体温
				bloodPressure: '',
				//血压
				breathe: '',
				sphygmus: '',

				data: {
					animalHeat: '',
					//体温
					bloodPressure: '',
					//血压
					breathe: '',
					//呼吸
					staPictureUrl: '',
					endPictureUrl: '',
					//护理图片
					healthGuidance: '',
					//健康指导
					number: '',
					//订单号
					nursingContent: '',
					//护理内容
					sphygmus: '',
					//脉搏
					userId: '',
					//用户id
					principleAction: '', //患者主述
					nurseId: ''
				}, //上传内容
				reportTemplate: '',
				isNullStatus: 0,
				identity: 1
			}
		},
		onLoad(option) {
			this.identity = this.$store.state.userInfo.identity
			console.log(this.$store.state.userInfo.identity);
			this.initData()
			if (option.number) {
				this.number = option.number
			}
			// console.log("animalHeat)", this.$store.state.animalHeat)
			// console.log(this.number, 'number')
			// console.log(this.$store.state.userInfo.id, 666666666666666)
			this.data.nurseId = this.$store.state.userInfo.id

		},
		onShow() {
			this.orderMsg()
			// this.initData()
		},
		watch: {
			// photo(val) {
			// 	if (val.length > 10) {
			// 		this.photo = this.photo.slice(0, 10)
			// 	}
			// },
			data: {
				deep: true,
				handler(newV) {
					console.log('nnnnnnnnnnnnnnnn', newV)
				}
			},
		},
		computed: {
			//低压范围
			low() {
				let arr = []
				for (let i = 50; i < 100; i++) {
					arr.push(i)
				}
				return arr
			},
			//高压范围
			height() {
				let arr = []
				for (let i = 70; i < 200; i++) {
					arr.push(i)
				}
				return arr
			},
			showHeight() {
				if (this.heightPre) {
					return '高压:' + this.heightPre + 'mmHg'
				}
			},
			showLow() {
				if (this.lowPre) {
					return '低压:' + this.lowPre + 'mmHg'
				}
			},
			pressureArr() {
				let arr = [
					[1],
					[2]
				]
				return arr
			}
		},
		methods: {
			transfer(i, date) {
				// console.log("i", i)
				this.i = i
				this.data[i.englishFieldName] = this.date.f3 + ":00"
				// console.log('this.data[i.englishFieldName]', this.data[i.englishFieldName])
			},
			timeSelect(date) {
				this.date = date
				// console.log('this.date', this.date)
				this.transfer(this.i, date)
			},
			initData() {
				let arr = JSON.parse(uni.getStorageSync('reportTemplate'))
				// console.log('111111111 111111', arr)
				if (arr != null) {
					this.isNullStatus = 1
					arr = arr.filter(r => r.isisDele != 1)
					arr.map(m => {
						if (m.fieldBelong != 1) {
							this.arr1.push(m)
							// console.log('基础情况评估', this.arr1)
							this.data[m.englishFieldName] = ''
						} else {
							let arr1 = JSON.parse(m.choiceType)
							m.options = arr1.map(a => {
								return {
									text: a.name,
									value: a.value
								}
							})
							this.arr2.push(m)
						}
						return m
					})
				} else {
					this.isNullStatus = 0
				}
			},
			handleCheck(e, index) {
				console.log(e, index, 'dddddd')
				// console.log(this.arr2[index].englishFieldName, e.detail.data.text)
				if (e.detail.data.text == '其他' || ((this.arr2[index].englishFieldName == 'insulin') && (e.detail.data
						.text ==
						'短效' || e.detail.data.text ==
						'速效')) || (this.arr2[index].englishFieldName == 'allergyHistory' && e.detail.data.text == '有')) {
					this.arr2[index].isShow = true
				} else {
					this.arr2[index].isShow = false
				}
			},
			//添加照片
			add() {
				let that = this;
				if (this.photo.length > 10) {
					plus.nativeUI.toast('您只需上传10张图片')
				} else {
					uni.chooseImage({
						count: 10, //默认9
						sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'],
						// sourceType: ['album'], //从相册选择
						success: function(res) {
							let tempFiles = res.tempFilePaths;
							uni.showLoading({
								title: '上传中……',
							})
							//上传图片 请求多个图片
							for (var i = 0; i < tempFiles.length; i++) {
								translateapp(tempFiles[i], 80, imgUrl => {
									// console.log(imgUrl,'护理报告---imgUrl');
									uploadImage(imgUrl, 'feedback/',
										result => {
											// console.log('打印的结果', result);
											that.url = result;
											that.photo.push(
												result) //如果图片一次性就超过这个值怎么使他赋的值回退
											uni.hideLoading()
										}, error => {
											uni.showToast({
												title: '上传失败',
												image: '../../static/authentication/error.png'
											})
										})

								})
							}
						},
						fail(e) {
							if (e.errCode == 11) {
								requestAndroid('android.permission.CAMERA', '摄像头')
							}
						}
					});
				}
			},
			//删除照片
			del(index) {
				uni.showModal({
					title: '确认删除当前图片吗',
					confirmColor: '#FF6A00',
					success: (res) => {
						if (res.confirm) {
							this.photo.splice(index, 1)
						}
					}
				})
			},
			//图片预览
			clickImg(index) {
				let _this = this
				wx.previewImage({
					urls: _this.photo,
					current: _this.photo[index], // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			//本人操作
			check() {
				this.checked = !this.checked
				console.log(this.checked, '是否本人操作')
			},
			//查看用户其他资料
			other() {
				uni.navigateTo({
					url: '../../order/other-detaile/other-detaile?number=' + this.number
				})
			},
			//提交
			async save() {
				// console.log("提交this.arr1", this.data)
				if (this.checked) {
					if (this.lowPre && this.heightPre) {
						this.data.bloodPressure = this.lowPre + '/' + this.heightPre
					}
					// console.log('专项的选择项', this.arr2)
					let mysom = this.arr2.some(some => {
						// 其他输入框是否展示
						if (some.isShow) {
							// 查询输入框展示时，详情是否输入
							// 判断过敏史字段有的时候
							// (some.englishFieldName == 'allergyHistory') {
							// 	// 如果过敏史详情字段没有值则返回true，提示请说明情况！
							// 	if (!this.data[some.englishFieldName + 'Details']) {
							// 		return true
							// 	}
							// 	// 其他输入框情况详情没有创建成功后，返回true，提示请说明情况！
							// } else if
							if (!this.data[some.englishFieldName + 'Detail']) {
								return true
							}
						}
					})
					console.log('mysom为true或false,false能正常操作', mysom)
					if (mysom) {
						uni.showToast({
							icon: 'none',
							title: '请说明情况！'
						})
						return
					}
					let som = this.arr2.some(some => {
						// console.log('some.englishFieldName', some.englishFieldName)
						if (!this.data[some.englishFieldName]) {
							return true
						}
					})
					console.log('false正确', som)
					// console.log("this.data", this.data, "som", som)
					this.data.staPictureUrl = this.photo.join(',')
					if (!som && (this.data.animalHeat && this.data.bloodPressure && this.data.sphygmus && this
							.data
							.breathe) || (this.data.healthGuidance && this.data
							.nursingContent && this.data
							.principleAction && this.data.staPictureUrl)) {


						this.data.userId = this.service.healthFile.userId
						this.data.number = this.number
						if (this.service.status == 3 && this.service.nursingRecordId == null) {
							this.data.isSubmitted = 0
							this.$store.commit('setAnimalHeat', this.data.animalHeat)
							this.$store.commit('setBloodPressure', this.data.bloodPressure)
							this.$store.commit('setSphygmus', this.data.sphygmus)
							this.$store.commit('setBreathe', this.data.breathe)
						} else {
							this.data.isSubmitted = 1
							this.data.animalHeat = this.$store.state.animalHeat
							this.data.bloodPressure = this.$store.state.bloodPressure
							this.data.breathe = this.$store.state.reathe
							this.data.sphygmus = this.$store.state.sphygmus
							// console.log(this.data.sphygmus)
						}
						if (this.data.isSubmitted == 1 && (this.photo.length > 10 || this.photo.length < 5)) {
							uni.showToast({
								icon: 'none',
								title: '护理图片需为5-10张！'
							})
							return
						} else {
							console.log('传到后端的数据对象0000000000', this.data)
							uni.showToast({
								icon: 'none',
								title: '创建护理报告成功'
							})
							let res = await created(this.data)
							if (res.success) {
								uni.showToast({
									icon: 'none',
									title: '创建护理报告成功'
								})
								setTimeout(() => {
									if (service.status == 3) {
										let pages = getCurrentPages()
										let currentPage = pages[pages.length - 1]
										let url = currentPage.route
										console.log('判断在哪个页面', url)
										uni.navigateTo({
											url: '../order-detaile/order-detaile?number=' + this.data
												.number
										})
									} else {
										uni.navigateBack({
											delta: 1
										}, 300)
										let pages = getCurrentPages()
										let currentPage = pages[pages.length - 1]
										let url = currentPage.route
										console.log('判断在哪个页面1111111', url)
									}
								})
							}
						}

					} else {
						uni.showToast({
							icon: 'none',
							title: '请填写所有必填项！'
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请确认是您本人真实操作！'
					})
				}
			},
			//获取订单详情
			async orderMsg() {
				let number = this.number
				let res = await selectOrderInfo({
					number
				})
				this.service = res.object
				// console.log(res, '订单详情11111111111111')
			}
		},
		components: {
			LbPicker,
			biaofunDatetimePicker
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: rgba(247, 247, 247, 1);
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		padding-bottom: 300rpx;
	}

	.project {
		background: #FFFFFF;
		padding: 0rpx 40rpx;
		box-sizing: border-box;
		margin-bottom: 16rpx;

		.star {
			padding-left: 8rpx;
			color: rgba(234, 32, 39, 1);
		}

		&.my {
			border-top: 1rpx solid rgba(0, 0, 0, 0.10);
		}

		&.mypadding {
			padding-bottom: 30rpx;
		}

		.other {
			width: 160rpx;
			height: 42rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			border: 1rpx solid #3C8EFF;
			line-height: 42rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #3C8EFF;
		}

		textarea {
			padding: 24rpx;
			width: 100%;
			box-sizing: border-box;
			background: #F6F6F6;
			border-radius: 20rpx;
		}
	}

	.title {
		line-height: 48rpx;
		height: 100rpx;
		display: flex;
		align-items: center;

		view {
			// width: 160rpx;
			height: 56rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
			line-height: 48rpx;
		}
	}

	.sign {
		height: 108rpx;
		border-bottom: 1rpx rgba(0, 0, 0, 0.1) solid;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&.mysign {
			height: auto;
			border: none;
			display: block;
			margin: 10rpx 0;

			.sin_wrap {
				padding: 28rpx 0;
			}
		}

		.ltitle {
			font-size: 32rpx;
			color: #333333;
		}

		input {
			font-size: 28rpx;
			text-align: right;
		}
	}

	.pressure {
		display: flex;
		width: 442rpx;
		align-items: center;
		justify-content: space-between;

		input {
			width: 210rpx;
			// border-bottom: rgba(0, 0, 0, 0.1) 1rpx solid;	
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			// padding-left: 10rpx;
			box-sizing: border-box;
			display: block;
		}
	}

	.photoBox {
		display: flex;
		flex-wrap: wrap;


		.addPhoto {
			width: 152rpx;
			height: 152rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			border: 2rpx dashed rgba(0, 0, 0, 0.87);
			margin-right: 26rpx;
			margin-bottom: 26rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

		}

		.photo {
			width: 144rpx;
			height: 144rpx;
			border-radius: 20rpx;
			margin-right: 26rpx;
			margin-bottom: 26rpx;
			position: relative;

			&.none {
				margin-right: 0;
			}

			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}

			.cha {
				position: absolute;
				font-size: 36rpx;
				right: -10rpx;
				top: -18rpx;
			}
		}

	}

	// .p { 
	// 	display: block;
	// 	font-size: 20rpx;
	// 	color: #FF6A00;
	// }
	.photoTitle {
		height: 76rpx;
		line-height: 50rpx;
		color: rgba(0, 0, 0, 0.87);

	}

	.photoTitle1 {
		padding-bottom: 16rpx;
		font-weight: 400;

		.photoTitle {
			// height: 36rpx;
			// line-height: 30rpx;
			font-size: 32rpx;
		}

		.my_wrap {

			padding: 24rpx 20rpx;
			background: rgba(236, 242, 254, 0.5);
			border-radius: 20rpx;

			.p {
				font-size: 26rpx;
				font-weight: 400;
				display: block;
				color: rgba(60, 142, 255, 1);
			}
		}
	}


	.record {
		width: 100%;
		min-height: 20rpx;
	}

	.leiming {
		height: 128rpx;
		// line-height: 128rpx;
		color: rgba(0, 0, 0, 0.38);
		margin-bottom: 212rpx;

		.label {
			font-size: 24rpx;
			color: #666666;
			line-height: 34rpx;
		}
	}

	.end_wrap {
		width: 100%;
		// height: 212rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 130rpx;
		left: 0;
		box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
		box-sizing: border-box;
		padding-top: 2%;

		.notice {
			margin: 10rpx 40rpx;
			display: flex;
			font-size: 24rpx;
			color: #666666;
			margin-bottom: 3%;
		}
	}

	.end {
		margin-top: 10%;
		width: 100%;
		background: #FFFFFF;
		// margin-bottom: 50rpx;
		// padding: 8rpx 40rpx 0;
		box-sizing: border-box;
		// box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
		position: fixed;
		bottom: 0;
		left: 0;

		.save {

			margin: 0 auto;
			height: 96rpx;
			width: 90%;
			text-align: center;
			color: #ffffff;
			line-height: 96rpx;
			background-color: #3C8EFF;
			border-radius: 16rpx;
			font-size: 36rpx;
			margin-bottom: 5%;

		}
	}

	.msg {
		position: relative;
		width: 524rpx;
		height: 212rpx;
		background: #FFFFFF;
		box-sizing: border-box;

		.count {
			position: absolute;
			right: -60rpx;
			bottom: 36rpx;
		}

		textarea {
			width: 600rpx;
			height: 180rpx;
			background: rgba(0, 0, 0, 0.03);
			border-radius: 20rpx;
			margin: 0 auto;
			padding: 24rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			box-sizing: border-box;
		}

		.placeholder {
			font-size: 28rpx;
			font-weight: 400;
			color: #BDBDBD;
		}
	}
</style>